<!DOCTYPE html>
<html>

<head>
    <title>海绵城市-Demo</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name='viewport' content='width=device-width,user-scalable=no'>
    <!-- <script src="https://cdn.bootcss.com/FileSaver.js/1.3.3/FileSaver.min.js"></script> -->
    <style>
    html,
    body {
        padding: 0px;
        margin: 0px;
    }

    .main {
        margin: 0px;
        padding: 0px;
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
    }
    </style>
    <script src="script/ht.js"></script>
    <script type="text/javascript">
    function init() {
        var dataModel = new ht.DataModel(),
            graphView = new ht.graph.GraphView(dataModel),
            view = graphView.getView();

        graphView.setEditable(true);
        graphView.setZoom(0.8);
        graphView.translate(-80, -50)

        view.className = 'main';
        document.body.appendChild(view);   
        var source = new ht.Node();
        source.setName('a');
        source.setPosition(100, 70);
        dataModel.add(source);

        // // 创建一个结束节点，设置名字和位置属性，添加到数据模型容器
        var target = new ht.Node();
        target.setName('b');
        target.setPosition(260, 70);
        dataModel.add(target);

        var three = new ht.Node();
        three.setName('circle');
        three.setPosition(180, 120);
        three.setSize(60, 40)
        three.setStyle('shape', 'circle');
        dataModel.add(three);

        // 创建一条连线，设置起始和结束节点，添加到数据模型容器
        var edge = new ht.Edge();
        edge.setSource(source);
        edge.setTarget(target);
        dataModel.add(edge);

        var edge2 = new ht.Edge();
        edge2.setSource(three);
        edge2.setTarget(target);
        dataModel.add(edge2);

        var edge3 = new ht.Edge();
        edge3.setSource(source);
        edge3.setTarget(three);
        dataModel.add(edge3);
    }
    </script>
</head>

<body onload="init()">
</body>

</html>